.flex {
  display: flex;
}
.flex-center {
  display: flex;
  justify-content: center;
}
.flex-between {
  display: flex;
  justify-content: space-between;
}
.flex-middle {
  display: flex;
  align-items: center;
}
.flex-col-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.flex-col-middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flex-col-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.flex-center-middle{
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-bottom {
  display: flex;
  align-items: end;
}

.no-select {
  user-select: none;
}

.p15 {
  padding: 1.5rem;
}
.pt15 {
  padding-top: 1.5rem;
}
.pt30 {
  padding-top: 3rem;
}
.pr15 {
  padding-right: 1.5rem;
}
.pb15{
  padding-bottom: 1.5rem;
}
.plr15 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.mtb15 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.mt8 {
  margin-top: 0.8rem;
}
.mt15 {
  margin-top: 1.5rem;
}
.mt20{
  margin-top: 2rem;
}
.mt30{
  margin-top: 3rem;
}
.mt_30 {
  margin-top: -3rem;
}
.mt_40 {
  margin-top: -4rem;
}
.mt_50 {
  margin-top: -5rem;
}
.mr30 {
  margin-right: 3rem;
}
.mr15 {
  margin-right: 1.5rem;
}
.mr8 {
  margin-right: .8rem;
}
.ml8 {
  margin-left: .8rem;
}
.ml15 {
  margin-left: 1.5rem;
}

.pointer {
  cursor: pointer;
}

.opaicty5{
  opacity: .5;
}

.c5 {
  color: #555;
}
.c7 {
  color: #777;
}
.c9{
  color: #999;
}


.fn12 {
  font-size: 1.2rem;
}
.fn14 {
  font-size: 1.4rem;
}
.fn16 {
  font-size: 1.6rem;
}
.fn18 {
  font-size: 1.8rem;
}
.fn24 {
  font-size: 2.4rem;
}
.fn28 {
  font-size: 2.8rem;
}
.fn32 {
  font-size: 3.2rem;
}

.z100 {
  z-index: 100;
}

.ov-h {
  overflow: hidden;
}
.text-center{
  text-align: center;
}
.text-left {
  text-align: left;
}
.h100{
  height: 100%;
}
.w100 {
  width: 100%;
}

.w200 {
  width: 20rem;
}
.w300 {
  width: 30rem;
}
.w400 {
  width: 40rem;
}

.relative {
  position: relative;
}

.line-animate {
  background: linear-gradient(to right, #29f1fa, #72eff673) no-repeat right bottom;
  background-size: 0px 2px;
  transition: background-size .5s ease-in-out;
  &:hover {
    background-position-x: left;
    background-size: 100% 2px;
  }
}